import React from "react";
import { Menu } from "antd";
import {
  PieChartOutlined,
  UserOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import { useNavigate, useLocation } from "react-router-dom";

function LeftNav() {
  const navigate = useNavigate();
  const location = useLocation(); // 获取当前路由路径

  // 根据当前路径动态设置选中状态
  const selectedKey = location.pathname.includes("usermanagement")
    ? "userManagement"
    : location.pathname.includes("visualization")
    ? "visualization"
    : location.pathname.includes("personalcenter")
    ? "personalcenter"
    : "visualization"; // 默认选中 "visualization"

  const items = [
    {
      key: "visualization",
      icon: <PieChartOutlined />,
      label: "可视化页面",
    },
    {
      key: "userManagement",
      icon: <UserOutlined />,
      label: "用户管理",
    },
    {
      key: "personalcenter",
      icon: <SettingOutlined />,
      label: "个人中心",
    },
  ];

  const handleMenuClick = (e) => {
    // 根据菜单项的 key 跳转到对应的路由
    switch (e.key) {
      case "visualization":
        navigate("/admin/visualization"); // 使用绝对路径
        break;
      case "userManagement":
        navigate("/admin/usermanagement"); // 使用绝对路径
        break;
      case "personalcenter":
        navigate("/admin/personalcenter"); // 使用绝对路径
        break;
      default:
        break;
    }
  };

  return (
    <div style={{ height: "100%", backgroundColor: "#001529" }}>
      <Menu
        theme="dark"
        mode="inline"
        selectedKeys={[selectedKey]} // 动态设置选中状态
        onClick={handleMenuClick}
        items={items} // 使用 items 属性
        style={{ height: "100%" }}
      />
    </div>
  );
}

export default LeftNav;
